<template>
	<view class="content">
		<view class="address-item unify-background-color unify-padding" v-for="(item,index) in list" :key="index">
			<view class="address-item-info">
				<view class="">{{item.consignee + ' ' + item.phone}}</view>
			</view>
			
			<view class="address-item-details unify-flex">
				<view class="address-item-label" :class="'bg-' + themeColor.name">{{item.label == 1? '学校': item.label == 2? '公司': '家'}}</view>
				<view class="address-item-address unify-font-size-line-astrict">{{item.detail}}</view>
			</view>
			
			<view class="address-item-operation">
				<view class="unify-border-top"></view>
				<view class="address-item-operation-nk unify-flex">
					<view class="address-item-operation-left iconfont" :class="[item.isDefault !== 1? 'el-icon-morenxuanzhong': 'el-icon-moren_xuanzhong tf-' + themeColor.name]" @tap="tapOperation(item, 1)">
						<text class="address-item-operation-name">设为默认</text>
					</view>
					<view class="address-item-operation-right unify-flex">
						<view class="iconfont el-icon-shanchu" @tap="tapOperation(item, 2)">
							<text class="address-item-operation-name">删除</text>
						</view>
						<view class="iconfont el-icon-bianji" @tap="tapOperation(item, 3)">
							<text class="address-item-operation-name">编辑</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 间隔 -->
		<uni-interval height="50px"></uni-interval>
		
		<!-- 底部按钮 -->
		<uni-base-unify-btn title="添加地址" @click="tapOperation(null,4)"></uni-base-unify-btn>
		
		<!-- 自定义模态框 -->
		<uni-show-modal ref="uniShowModal" :show="show"></uni-show-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				show: false
			}
		},
		onLoad(){
			this.initData()
		},
		onShow() {
		    // 重新加载页面逻辑
		    this.initData()
		},
		methods: {
			
			initData(){
				this.$https({
					url:"/address/list",
					method:"get",
					success:(res)=>{
						// console.log(res.data)
						this.list=res.data
					}
				})
			},
			// 操作
			tapOperation(e, i) { // 1设为默认  2删除  3编辑  4添加
			// console.log(e+"66666"+i)
				switch(i) {
					case 1:
						this.$https({
							url:"/address/default",
							method:"put",
							data:e,
							success:(res)=>{
								uni.redirectTo({
								    url: '/packageB/pages/userShippingAddressList/index' // 这里替换为你当前页面的路径
								})
							}
						})
						break
					case 2:
						this.$https({
							url:"/address",
							method:"delete",
							data:e,
							success:(res)=>{
								uni.redirectTo({
								    url: '/packageB/pages/userShippingAddressList/index' // 这里替换为你当前页面的路径
								})
							}
						})
						break
					case 3:
						this.$openPage({
							name: 'userShippingAddressAdd',
							query: {
								data: e
							}
							
						})
						break
					case 4:
						this.$openPage('userShippingAddressAdd')
						break
					default:
					
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-item {
		padding: 20rpx 30rpx 0;
		margin-bottom: 10px;
	}
	
	.address-item-details {
		margin-top: 20rpx;
	}
	
	.address-item-label {
		font-size: $uni-font-size-sm;
		// background-color: $uni-auxiliary-colour3;
		color: $uni-text-color-inverse;
		line-height: 38rpx;
		padding: 0 10rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}
	
	.address-item-address {
		width: 83%;
	}
	
	.address-item-operation {
		margin-top: 20rpx;
	}
	
	.address-item-operation-nk {
		height: 86rpx;
		align-items: center;
		justify-content: space-between;
	}
	
	.iconfont {
		line-height: 86rpx;
		font-size: $uni-font-size-sm;
	}
	
	.address-item-operation-name {
		margin-left: 5rpx;
		color: $uni-text-color;
	}
	
	.el-icon-shanchu {
		color: $uni-text-color-grey;
	}
	
	.el-icon-bianji {
		margin-left: 30rpx;
	}
</style>
